<template>
    <h1 @click="add">{{ state.count }} * 2 = {{ double }}</h1>
</template>
<script lang="ts">
import { reactive, computed } from 'vue'
export default {
  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 1 })
    function add () {
        state.count ++
    }
    const double = computed(() => state.count * 2)

    // 暴露 state 到模板
    return {
      state,
      add,
      double
    }
  }
}
</script>

